<script setup lang="ts">
import { onMounted, reactive,ref } from 'vue';
import axios from 'axios';
import { h } from 'vue'
import { ElNotification } from 'element-plus'
const cities = ['服务器HTTP指纹', '服务器系统指纹', '是否支持DOT', '是否支持DOH', '是否支持IPv6', '是否支持DNSSEC', '是否支持0x20', '源端口随机化情况', '任播（未完成）','DNS软件版本']
const checkboxGroup2 = ref(['Shanghai'])
const methods = {
	onSubmit: async () => {
        ElNotification({
            title: '提示',
            message: h('i', { style: 'color: teal' }, '程序已经开始运行，请耐心等待1分钟'),
            duration: 0,
        })
        state.load = true
        const requests = [
            axios.post('/myapi/api/startssh', {
                "choice": "response_validation",
                "value": state.form.Ip
            }),
            axios.post('/myapi/api/startssh', {
                "choice": "dot",
                "value": state.form.Ip
            }),
            axios.post('/myapi/api/startssh', {
                "choice": "doh",
                "value": state.form.Ip
            }),
            
        ];

        // Wait for all promises to resolve
        const [ secResponse,dotResponse, dohResponse] = await Promise.all(requests);

        state.dot = dotResponse.data.output.split('ot: ')[1];

		if(dohResponse.data.output == null) {
			state.doh = '由于探测方法限制,无法从该ip获得其doh信息'
		}else{
			state.doh = dohResponse.data.output.split(': ')[1];
		}
        // Process the responses

        state.sec = secResponse.data.output.split(':')[1];
		//state.sec = 'Yes'

        // if(validationResponse.data.output == null) {
		// 	state.sec = 'response_validation: Yes'
		// }else{
		// 	state.sec = dohResponse.data.output;
		// }
        state.load = false
	}
};

interface UserForm {
	Ip: string;
	Mode: '';
}

const state = reactive({
	form: {
		Ip: '8.8.8.8',
		Mode: '',
	} as UserForm,
    buttonText: '开始测试',
	buttonStyle: { backgroundColor: ''},
	isAttacking: false,
    dot: '',
    doh: '',
    v6: '',
    sec: '',
    load : false
});
</script>

<template>
    <div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }" class="bread">主页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/Detection' }" class="bread">属性感知</el-breadcrumb-item>
			<el-breadcrumb-item class="bread">DNS协议扩展感知功能测试</el-breadcrumb-item>
		</el-breadcrumb>
	</div>

    <div class="display-flex j-c-c a-i-c height100">
        <div class="login-form">
            <h1 class="title">IP输入</h1>

            <br />
            
            <el-form :model="state.form">
				<el-form-item prop="email" label="探测的IP地址">
					<el-input v-model="state.form.Ip" placeholder="请输入IP地址"></el-input>
				</el-form-item>
            </el-form>

            <el-form-item class="button-container">
                <el-button class="Mybutton" type="primary" @click="methods.onSubmit"
                    :style="{ backgroundColor: state.buttonStyle.backgroundColor }">
                    {{ state.buttonText }}
                </el-button>
            </el-form-item>
        </div>
    </div>
    <div class="display-flex j-c-c a-i-c height100">
        <h1 class="title"></h1>
        <el-scrollbar class="output-form"  v-loading = "state.load">
            <h1 class="title">探测结果</h1>
            <el-form :model="state.form" label-width="140px">
                <el-form-item prop="email" label="是否支持DOT">
                    <el-input v-model="state.dot" ></el-input>
                </el-form-item>
                <el-form-item prop="email" label="是否支持DOH">
                    <el-input v-model="state.doh" ></el-input>
                </el-form-item>
                <!-- <el-form-item prop="email" label="是否支持IPv6">
                    <el-input v-model="state.v6" ></el-input>
                </el-form-item> -->
                <el-form-item prop="email" label="是否支持DNSSEC">
                    <el-input v-model="state.sec" ></el-input>
                </el-form-item>
            </el-form>
	</el-scrollbar>
    </div>
</template>


<style lang="css" scoped>
.login-form {
	width: 400px;
	height: 200px;
	margin: 0 auto;
    margin-top: 10px;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.output-form {
	width: 800px;
	height: 270px;
    margin-top: 40px;
	margin: 0 auto;
	padding: 100px;
	border-radius: 2px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}


.bread {
    font-size: 34px;
}

.OutputBox {
	width: 400px;
	height: 220px;
	margin: 0 auto;
	padding: 10px;
	margin-top: 30px;
	border-radius: 2px;
	box-shadow: 3px 3px 10px 8px #f1f1f1;
}

.but {
    margin-top: 5px;
}

.Output {
	position: relative;
	display:flex;
    justify-content:center;
    align-items:height100;
	margin-top: 10px;
}

.code-box {
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
}

.Output {
	position: relative;
	margin-top: 10px;
}

.Mybutton {
	text-align: center;
	margin: 0 auto;
	
}

.button-container {
  margin-top: 20px; /* 增加按钮与上方的距离 */
  text-align: center; /* 使按钮居中对齐 */
}
</style>